<template>
    <div class="boxIntegral">
      <div>
        <p><router-link :to="{name:'Administration'}"><span><</span></router-link>安装领积分</p>
      </div>
      <div class="boxActiveTwo">
        <img src="../assets/轮播/bgs.png">
        <div>
          <p>可领取<span><img src="../assets/小图标/bsg1.png">&nbsp;&nbsp;兑换好礼&nbsp;&nbsp;></span></p>
          <div class="boxPs">
            <img src="../assets/小图标/downlos2.png">
            <p>快手</p>
            <p style="font-size: .25rem;">61.8M | 63万人已领取</p>
            <p>安装</p>
            <p>+20<img src="../assets/小图标/金币.png"></p>
          </div>
          <div class="boxPs bg">
            <img src="../assets/小图标/downlos3.png">
            <p>快手极速版-领现金</p>
            <p style="font-size: .25rem;">61.8M | 63万人已领取</p>
            <p>安装</p>
            <p>+50<img src="../assets/小图标/金币.png"></p>
          </div>
          <div class="boxPs bgo">
            <img src="../assets/小图标/downlos4.png">
            <p>精灵盛典：黎明-暗黑复仇者</p>
            <p style="font-size: .25rem;">61.8M | 63万人已领取</p>
            <p>安装</p>
            <p>+20<img src="../assets/小图标/金币.png"></p>
          </div>
        </div>
        <mt-loadmore :top-method="loadTop"
                     ref="loadmore" style="font-size: .4rem;">
          <ul>
            <li v-for="(item,index) in newdata" :key="index" v-if="index < num">
              <p class="lefts"><img :src="item.img"></p>
              <div class="right">
                <p>{{item.name}}</p>
                <p>{{item.active}}</p>
                <p>{{item.activeOne}}</p>
                <p>+20<img :src="item.activeTwo"><i>{{item.btn}}</i></p>
              </div>
            </li>
          </ul>
        </mt-loadmore>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Integral",
      data(){
          return{
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/integral",
            newdata:[],
            num:2
          }
      },
      methods:{
          gets(){
          axios.get(this.getUrl)
            .then(res=>{
              this.newdata = res.data.data;
              console.log(this.newdata)
            })
            .catch(error=>{
              console.log(error)
            });
        },
        loadTop() {
          this.$refs.loadmore.onTopLoaded();
          let This = this;
          var lenght = Object.keys(this.newdata).length;
          if (lenght >= this.num){
            this.num += 1
          } else {
            this.num = lenght
            console.log("加载已结束")
          }
        },
      },
      mounted() {
          this.gets()
      }
    }
</script>

<style scoped>
  @import "../assets/css/integral.css";
</style>
